import { defineComponent, ref, reactive } from "vue";
import styles from "./bannerNav.module.less";
import { imgPath } from "@/common/utils";
import { useRouter } from "vue-router";

export default defineComponent({
  name: 'bannerNavs',
  setup() {
    const router = useRouter();
    // 跳转路由path
    const toPath = (path: string) => {
      router.push(path);
    }
    const BannerNavList = ref([
      {
        text: '团队意外险',
        show: true,
        icon: imgPath('/home/huo.png'),
        iconActived: imgPath('/home/huo-acitived.png'),
        path: '/GroupList?id=0',
        children: [
          {
            label: '境内旅游(不含港澳台)',
            path: '/GroupList?id=境内旅游（不含港澳台）',
            hlwShow: false,
          },
          {
            label: '出境旅游(含港澳台)',
            path: '/GroupList?id=出境旅游（含港澳台）',
            hlwShow: false,
          },
          {
            label: '研学专属',
            path: '/GroupList?id=研学专属',
            hlwShow: false,
          },
          {
            label: '自驾专属',
            path: '/GroupList?id=自驾专属',
            hlwShow: false,
          },
          {
            label: '台湾游',
            path: '/GroupList?id=台湾游',
            hlwShow: false,
          },
          {
            label: '赴美加澳新游',
            path: '/GroupList?id=赴美加澳新游',
            hlwShow: false,
          },
          {
            label: '航空意外',
            path: '/GroupList?id=航空意外',
            hlwShow: false,
          },
        ]
      },
      {
        text: '责任保险',
        show: false,
        icon: imgPath('/home/aixin.png'),
        iconActived: imgPath('/home/aixin-acitived.png'),
        path: '/home?id=1',
        children: [
          {
            label: '旅游险统保示范项目',
            path: '/duty/detial?id=旅责险统保示范项目',
            hlwShow: true,
          },
          {
            label: '旅行社旅游服务质量保证金履约保证保险',
            path: '/warrantyDeposit/detail?productCode=22PR199978&id=旅行社旅游服务质量保证金履约保证保险',
            hlwShow: true,
          },
          {
            label: '公众责任保险',
            path: '/propertyLiability/details?productCode=20PR613323&id=公众责任保险',
            hlwShow: true,
          },
          {
            label: '雇主责任保险',
            path: '/propertyLiability/details?productCode=20PR890597&id=雇主责任保险',
            hlwShow: true,
          },
          {
            label: '西藏旅行社责任保险',
            path: '/detail?productCode=20PR415876&id=西藏旅行社责任保险',
            hlwShow: true,
          },
          {
            label: '山东省旅游景区安全生产责任保险',
            path: '/propertyLiability/details?productCode=21PR615995&id=山东省旅游景区安全生产责任保险',
            hlwShow: true,
          },
          {
            label: '旅游景区安全生产责任保险',
            path: '/propertyLiability/details?productCode=22PR918748&id=旅游景区安全生产责任保险',
            hlwShow: true,
          },
          {
            label: '自驾游机构责任保险',
            path: '/propertyLiability/details?projectCode=20XM560480&id=自驾游机构责任保险',
            hlwShow: true,
          },
          {
            label: '道路客运承运人责任保险',
            path: '',
            hlwShow: true,
          },
          {
            label: '文旅活动组织者责任险',
            path: '/propertyLiability/details?productCode=22PR242572&id=文旅活动组织者责任险',
            hlwShow: true,
          },
          {
            label: '太保民宿企业综合保险',
            path: '/propertyLiability/homeStayInsureDetail?productCode=21PR242331&id=太保民宿企业综合保险',
            hlwShow: true,
          },
          {
            label: '长安民宿企业综合保险',
            path: '/propertyLiability/homeStayInsureDetail?productCode=22PR354639&id=长安民宿企业综合保险',
            hlwShow: true,
          },
        ],
        programme: {
          icon: imgPath('/home/prod_img.jpg'),
          title: '旅责险统保示范项目',
          info: '旅行社责任保险统保示范项目是由中联金安保险经纪有限公司作为项目保险经纪人，国内六家最大的财产保险公司组成共保体，贴合行业实际需求开发的保险产品。示范项目保障分三层：一是统保示范项目自身保障，二是相配套的旅意险保障，三是并案处理机制。'
        }
      },
      {
        text: '特色保险',
        show: true,
        icon: imgPath('/home/mine.png'),
        iconActived: imgPath('/home/mine-acitived.png'),
        path: '/PersInsureList?id=2',
        children: [
          {
            label: '境外旅游',
            path: '/PersInsureList?id=境内旅游',
            hlwShow: false,
          },
          {
            label: '特色保障',
            path: '/PersInsureList?id=特色保障',
            hlwShow: false,
          },
          {
            label: '户外运动',
            path: '/PersInsureList?id=户外运动',
            hlwShow: false,
          },
          {
            label: '交通安全',
            path: '/PersInsureList?id=交通安全',
            hlwShow: false,
          },
        ],
      }
    ])
    const bannerArea = reactive({
      BannerNavListActived: 0
    })
    const navTo = (path: string) => {
      router.push(path);
    }
    const Submenu = (props: any) => (
      <div class={styles.expendCard}>
        <div class={styles.expendCardContainer}>
          <div class={styles.list}>
            {
              props.list.map((itemX: any) => (
                <div class={styles.item} onClick={() => { toPath(itemX.path) }}>
                  <span>{itemX.label}</span>
                  <div>
                    {
                      itemX.hlwShow ? <div class={styles.identificate}>互联网</div> : ''
                    }
                  </div>
                  <div class={styles['line']}></div>
                </div>
              ))
            }
          </div>
          <div>
            {
              bannerArea.BannerNavListActived == 1 ?
                <div class={styles.programme}>
                  <div class={styles.header}>精选方案</div>
                  <div class={styles['info-box']}>
                    <img src={BannerNavList.value[bannerArea.BannerNavListActived].programme?.icon}/>
                    <div class={styles.content}>
                      <div class={styles.title}>{BannerNavList.value[bannerArea.BannerNavListActived].programme?.title}</div>
                      <div class={styles.des}>{BannerNavList.value[bannerArea.BannerNavListActived].programme?.info}</div>
                      <div class={styles.btn}>查看详情</div>
                    </div>
                  </div>
                </div> : ''
            }
          </div>
        </div>
      </div>
    )
    return () => (
      <div class={styles.bannerNavs}>
        <div class={styles['banner-navbar']}>
          <a-dropdown placement="rightTop" v-slots={{
            overlay: () => (
              <Submenu list={BannerNavList.value[bannerArea.BannerNavListActived].children} />
            )
          }}>
            <div class={styles['banner-navbar-left']}>
              {
                BannerNavList.value.map((itemN: any, index: number) => (
                  <div class={styles['banner-navbar-item']} onClick={() => navTo(itemN.path)} onMouseover={() => { bannerArea.BannerNavListActived = index }}>
                    <img src={itemN.icon} class={styles['noActived']} />
                    <img src={itemN.iconActived} class={styles['actived']} />
                    <div class={styles['banner-title']}>
                      <span>{itemN.text}</span>
                      <div>
                        {
                          itemN.show ? <div class={styles['identificate']}>互联网</div> : ''
                        }
                      </div>

                    </div>
                  </div>
                ))
              }
            </div>
          </a-dropdown>
        </div>
      </div>
    )
  }
})
